<!--
 * @Description:
 * @Version: 1.0
 * @Autor: hasaiki
 * @Date: 2024-01-09 09:21:46
 * @LastEditors: hasaiki
 * @LastEditTime: 2024-03-22 14:15:44
-->
<template>
    <div class="scene">
        <div id="div3d"></div>
        <div id="div2d"></div>
        <div class="btn-wrap">
            <div>
                园区场景：
                <button @click="getSceneMsg">获取场景信息</button>
                <button @click="changeCampus">切换场景</button>
            </div>
            <div>
                效果模板:
                <button @click="loadEffect">加载效果模板</button>
                <button @click="destroyEffect">销毁效果模板</button>
                <button @click="changeEffect">切换效果模板</button>
            </div>
            <div>
                园区点位:
                <button @click="initTwinsManager">初始化点位管理器</button>
                <button @click="getTwinsData">获取点位数据信息</button>
                <button @click="destroyTwins">销毁点位</button>
                <button @click="hideTwins">隐藏点位</button>
                <div>
                    <button @click="loadTwins('normal')">
                        加载当前层级点位(normal)
                    </button>
                    <button @click="loadTwins('batch')">
                        加载当前层级点位(batch)
                    </button>
                    <button @click="loadTwins('splitNormal')">
                        加载当前层级点位(splitNormal)
                    </button>
                    <button @click="loadTwins('splitBatch')">
                        加载当前层级点位(splitBatch)
                    </button>
                </div>
                <div>
                    <button @click="loadUuid">根据uuid加载点位</button>
                    <button @click="loadClassId">
                        根据twinClassId加载点位
                    </button>
                    <button @click="loadClassCode">
                        根据twinClassCode加载点位
                    </button>
                </div>
                <div>
                    <button @click="loadCustomTwins('img')">
                        自定义气泡-图片
                    </button>
                    <button @click="loadCustomTwins('el')">
                        自定义气泡-element
                    </button>
                </div>
            </div>
            <div>
                <button @click="loadBoundary">加载boundary</button>
                <button @click="loadRouteLine">加载RouteLine</button>
            </div>
            <div>
                用户信息:
                <button @click="getUserConfig">获取登录用户信息</button>
                <button @click="getLicenceInfo">获取baseX授权信息</button>
            </div>
            <div>
                获取配置：
                <button @click="getConfig">获取xxv开发配置</button>
                <button @click="getDict">获取业务字典</button>
                <button @click="getDevDictInfo">获取开发字典</button>
                <button @click="getMenuInfo">获取菜单</button>
                <button @click="getMenuLegend">获取菜单包含图例</button>
            </div>
            <div>
                效果包管理：
                <button @click="getPackages">获取效果包列表</button>
                <button @click="getPackageVersion">获取效果包版本</button>
            </div>
            <div>
                图例相关:
                <button @click="getLegendInfo">获取图例</button>
                <button @click="getLegendName">根据名称获取图例</button>
                <button @click="getLegendCode">根据Code获取图例</button>
                <button @click="getLegendMenu">根据menuId获取图例</button>
                <button @click="getLegendTwinsInfo">获取图例孪生体</button>
            </div>
            <div>
                告警相关:
                <button @click="getLevel">告警等级</button>
                <button @click="getAlert">所有告警</button>
                <button @click="getAlertTime">时间段告警</button>
                <button @click="getAlertStatus">状态告警</button>
                <button @click="getAlertLevel">等级告警</button>
                <button @click="getAlertCode">孪生体code告警</button>
            </div>
            <div>
                孪生对象：
                <button @click="getTwinsObjectData">查询孪生对象数据</button>
                <button @click="getMapLevelData">查询地图层级数据</button>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import testMarker from '@/assets/img/testMarker.png';
import { init } from '@/utils/default';
import TestPanel from './TestPanel.vue';
import { sceneCode } from '@/utils';
// 1.初始化三维容器
const initScene = async () => {
    window.app = await window.TiIns.createContainer({
        container: 'div3d',
        background: '#000000',
    });
    // 2.加载三维场景
    loadCampus();
};
const loadCampus = () => {
    window.campusManagerIns = window.TiIns.CampusManager({
        app: window.app, // THINGJS实例
        core: window.TiIns.Core, // 核心实例
        sceneCode,
        flyToSetting: true, // 园区，建筑，楼层默认飞到设置视角 - 默认true
        initChildScene: true, // 加载主场景时是否加载子场景 默认false
        childSceneBeginLoad: () => {
            console.log('子场景开始加载');
        },
        childSceneLoaded: () => {
            console.log('子场景加载完毕');
        },
        sceneLoaded: async (campus: any) => {
            console.log('主场景加载完毕', window.campusManagerIns);
            init(campus);
            // createPanelDemo();
        },
    });
};
const createPanelDemo = () => {
    const pm = window.TiIns.PanelManager({ app: window.app });
    const box = window.app.create({
        type: 'Box',
        parent: window.campusManagerIns.curCampus,
        position: [0, 0.5, 100], // 世界坐标系下的位置
        complete: (e: any) => {
            // 设置对象可以被拾取
            e.object.customPicker = true;
        },
    });
    const speed = 10;
    box.on('click', async () => {
        //   /**
        //  * @description 创建面板
        //  * @param {*} parent 绑定的物体
        //  * @param {*} vue 显示的vue
        //  * @param {*} userData 面板属性
        //  * @param {*} localPosition 相对定位
        //  * @param {*} pivot 锚点
        //  * @param {*} isMarker 是否是marker
        //  *
        //  * 1.根据position直接定位,需要指定parent为scene
        //  * 2.仅UIAnchor支持通过属性实时数据更新dom,marker需要找到dom节点来更新
        //  */
        // 创建三维面板
        const panel = await pm.loadPanel(
            box,
            TestPanel,
            { speed },
            null,
            [0.5, 1.15],
            true
        );
        // 创建二维面板
        // position: THING.BaseObject | Array<number>,
        // vue: VueElement,
        // userData?: any,
        // lineOption?: any,
        // draggable?: DraggbleOptio:{enable: Boolean, selector: String},
        // pivot?: PIVOT_2D,
        // offset?: Array<number>
        // const panel = await pm.load2DPanel({ position: box, vue: TestPanel, userData: { speed }, draggable: { enable: true, selector: 'p' }, lineOption: { color: '#00ff00' } });
        // 关闭panel
        // pm.close(panel);
        // 隐藏panel
        // pm.hide(panel);
        // 创建marker
        // pm.CreateMarker({
        //     type: 'Marker',
        //     id: 'myMarker01',
        //     parent: box,
        //     localPosition: [0, 5, 0],
        //     url: 'https://cdn.uino.cn/marker-image/aa.png',
        //     size: 4,
        //     scaleOptions: {
        //         scope: [
        //             {
        //                 min: -100,
        //                 max: 199,
        //                 scale: 1,
        //             },
        //             {
        //                 min: 100,
        //                 max: 199,
        //                 scale: 3,
        //             },
        //             {
        //                 min: 200,
        //                 max: 999999,
        //                 scale: 1,
        //             },
        //         ],
        //     },
        //     complete(ev) {
        //         const obj = ev.object;
        //         console.log(obj);
        //     },
        // });
    });
};
// 获取场景管理类实例信息
const getSceneMsg = () => {
    if (!window.campusManagerIns) return;
    console.log('场景传参', window.campusManagerIns.options);
    console.log('场景列表', window.campusManagerIns.sceneList);
    console.log('当前园区', window.campusManagerIns.curCampus);
    console.log('当前场景信息', window.campusManagerIns.curSceneData);
    console.log('当前园区详细信息', window.campusManagerIns.curCampusData);
};
// 切换场景
const changeCampus = () => {
    if (!window.campusManagerIns) return;
    window.campusManagerIns.changeCampus({
        sceneCode: '702653f3-f14e-4106-9e2c-917fde23aab6',
    });
};

// 加载效果模板
const loadEffect = async () => {
    // 加载当前加载场景启用的效果包
    const effectList = await window.TiIns.Core.Api.getSceneEffect({
        sceneCode: '30de2861-5736-4b7f-8127-162496bf78e7',
    });
    let useEffect = null;
    if (effectList.data?.rows.length) {
        useEffect = effectList.data?.rows.find(
            (effect: any) => effect.use === true
        );
    }
    if (!useEffect) return;
    const effectOption = {
        app: window.app,
        campus: window.campusManagerIns.curCampus,
        name: window.campusManagerIns.curCampusData.name,
        frame: `${window.TiIns.Core.httpOpt.previewEffectUrl}${useEffect.code}/${useEffect.version}/frame.js`,
        file: `${window.TiIns.Core.httpOpt.previewEffectUrl}${useEffect.code}/${useEffect.version}/`,
    };
    window.effectManagerIns = window.TiIns.EffectManager(effectOption);
};
// 销毁效果模板
const destroyEffect = () => {
    if (!window.effectManagerIns) return;
    window.effectManagerIns.destroyEffect();
};
// 切换效果模板
const changeEffect = () => {
    if (!window.effectManagerIns) return;
    const options = {
        name: '修改效果包',
        frame: '/test/testEffect/frame.js',
        file: '/test/testEffect/',
    };
    window.effectManagerIns.changeEffect(options);
};
// 初始化孪生体管理类
const initTwinsManager = () => {
    window.twinsManagerIns = window.TiIns.CampusTwinsManager({
        app: window.app, // HTINGJS实例
        core: window.TiIns.Core,
        queryParam: {
            // 查询参数-查询当前场景的所有点位
            sceneId: window.campusManagerIns.curSceneData.uuid,
        },
        initCb: () => {
            // 加载完毕回调
            console.log('加载孪生体实例初始化完毕');
        },
        singleCb: (obj: any) => {
            // 统一气泡单击回调
            console.log('统一单击回调', obj);
        },
        dbCb: (obj: any) => {
            // 统一气泡双击回调
            console.log('统一双击回调', obj);
        },
        enterCb: (obj: any) => {
            console.log('统一移入回调', obj);
        },
        leaveCb: (obj: any) => {
            console.log('统一移出回调', obj);
        },
    });
};
// 获取孪生体各种信息
const getTwinsData = () => {
    console.log('当前场景孪生体初始化参数：', window.twinsManagerIns.options);
    console.log(
        '当前场景所有孪生体信息(默认+摆点): ',
        window.twinsManagerIns.originData
    );
    console.log(
        '当前场景所有默认孪生体：',
        window.twinsManagerIns.defaultTwinsMap
    );
    console.log(
        '当前场景所有用户摆点孪生体：',
        window.twinsManagerIns.twinsArray
    );
    console.log(
        '当前场景每个层级用户摆点孪生体：',
        window.twinsManagerIns.twinsLevelMap
    );
};
// 加载点位-normal(常规加载) batch(批量加载) splitNormal(常规分组加载) splitBatch(分组批量加载)-默认normal
const loadTwins = (type: string) => {
    destroyTwins();
    window.twinsManagerIns.loadCurrentLevelTwins({
        mode: type,
        cb: () => {
            console.log('加载完毕');
        },
    });
};
// 销毁点位
const destroyTwins = () => {
    window.twinsManagerIns.destroyCurrentLevelTwins();
};
// 隐藏点位
const hideTwins = () => {
    window.twinsManagerIns.hideCurrentLevelTwins();
};
// 加载点位-自定义气泡
const loadCustomTwins = (type: string) => {
    destroyTwins();
    if (type === 'img') {
        window.twinsManagerIns.loadCurrentLevelTwins({
            customMarker: {
                // el: createEle(),
                url: testMarker,
                // keepSize: false,
                size: 5,
                inheritStyle: false,
                inheritScale: false,
                // localPosition: [0, 5, 0],
                // pivot: [1, 1],
                // alwaysOnTop: false,
                singleCb: (obj: any) => {
                    console.log('气泡单击回调', obj);
                },
                dbCb: (obj: any) => {
                    console.log('气泡双击回调', obj);
                },
                enterCb: (obj: any) => {
                    console.log('气泡移入回调', obj);
                },
                leaveCb: (obj: any) => {
                    console.log('气泡移出回调', obj);
                },
            },
            cb: () => {
                console.log('加载完毕');
            },
        });
    }
    if (type === 'el') {
        window.twinsManagerIns.loadCurrentLevelTwins({
            customMarker: {
                el: createEl(),
                // url: testMarker,
                // keepSize: false,
                inheritStyle: false,
                inheritScale: false,
                size: 1,
                localPosition: [0, 2, 0],
                // pivot: [1, 1],
                // alwaysOnTop: false
            },
            cb: () => {
                console.log('加载完毕');
            },
        });
    }
};
// 根据uuid加载点位
const loadUuid = () => {
    destroyTwins();
    window.twinsManagerIns.loadModelByUuid({
        uuids: ['1603207783275679746', '1603207712619429890'],
        cb: () => {
            console.log('加载完毕');
        },
    });
};
// 根据twinClassId加载点位
const loadClassId = () => {
    destroyTwins();
    window.twinsManagerIns.loadModelByTwinClassId({
        classIds: ['1554300964383539202'],
        cb: () => {
            console.log('加载完毕');
        },
    });
};
// 根据twinClassCode加载点位
const loadClassCode = () => {
    destroyTwins();
    window.twinsManagerIns.loadModelByTwinClassCode({
        codes: ['ZHAO_MING_DENG'],
        cb: () => {
            console.log('加载完毕');
        },
    });
};
// 自定义dom
const createEl = () => {
    const div = document.createElement('div');
    div.innerHTML = `<div class="divClass" style="width:246px;height:236px;background-color: rgba(255,255,0,0.2)";
  background-repeat:no-repeat;background-size:100% 100%; padding: 25px 37px 82px 20px; box-sizing:border-box;
  font-size: 20px;">
  <div class="name" style="font-size:24px;line-height:24px;color:#000;line-height: 38px;
  padding-left: 42px;width:100%;
  overflow: hidden; text-overflow:ellipsis; white-space: nowrap;title="自定义气泡";">自定义气泡</div>
  <div class="content" style="width:100%;height:calc(100% - 42px);font-size:30px;color:#000;padding:8px;box-sizing:border-box;overflow-y:auto;">
  测试自定义
  </div>
  </div>`;
    return div;
};
// 获取baseX各种配置
// 获取xxv开发配置
const getConfig = () => {
    window.TiIns.Core.Config.getXxvConfig().then((res: any) => {
        console.log('xxv开发配置', res);
    });
};
// 获取业务字典
const getDict = () => {
    window.TiIns.Core.Config.getBizDict('WEN_CHANG_TU').then((res: any) => {
        console.log('业务字典', res);
    });
};
// 获取开发字典
const getDevDictInfo = () => {
    window.TiIns.Core.Config.getDevDict('SHE_BEI_ZHUANG_TAI').then(
        (res: any) => {
            console.log('开发字典', res);
        }
    );
};
// 获取菜单
const getMenuInfo = () => {
    window.TiIns.Core.Config.getMenu().then((res: any) => {
        console.log('菜单', res);
    });
};
// 获取菜单包含图例
const getMenuLegend = () => {
    window.TiIns.Core.Config.getMenuWithLegend().then((res: any) => {
        console.log('菜单包含图例', res);
    });
};
// 获取图例
const getLegendInfo = () => {
    window.TiIns.Core.Config.getLegend().then((res: any) => {
        console.log('所有图例', res);
    });
};
// 根据图例名称获取图例
const getLegendName = () => {
    window.TiIns.Core.Config.getLegend({ name: '照明灯' }).then((res: any) => {
        console.log('name获取图例', res);
    });
};
// 根据图例code获取图例
const getLegendCode = () => {
    window.TiIns.Core.Config.getLegend({ code: 'JIE_NEN_DENG' }).then(
        (res: any) => {
            console.log('code获取图例', res);
        }
    );
};
// 根据菜单id获取图例
const getLegendMenu = () => {
    window.TiIns.Core.Config.getLegend({ menuId: '1552595325454172161' }).then(
        (res: any) => {
            console.log('menuId获取图例', res);
        }
    );
};
// 获取图例孪生体
const getLegendTwinsInfo = () => {
    window.TiIns.Core.Config.getLegendTwins('1594983664295395329').then(
        (res: any) => {
            console.log('图例孪生体', res);
        }
    );
};
// 获取告警相关
// 获取告警等级数据
const getLevel = () => {
    window.TiIns.Core.Alarm.getAlarmLevel().then((res: any) => {
        console.log('告警等级', res);
    });
};
// 获取所有告警数据
const getAlert = () => {
    window.TiIns.Core.Alarm.getAlarmData().then((res: any) => {
        console.log('所有告警数据', res);
    });
};
// 根据时间段获取告警
const getAlertTime = () => {
    window.TiIns.Core.Alarm.getAlarmData({
        beginTime: '2022-11-22 16:00:00',
        endTime: '2022-11-23 00:00:00',
    }).then((res: any) => {
        console.log('时间段告警数据', res);
    });
};
// 根据告警状态获取告警
const getAlertStatus = () => {
    window.TiIns.Core.Alarm.getAlarmData({
        processStatus: 'UN_PROCESSED',
    }).then((res: any) => {
        console.log('告警状态告警数据', res);
    });
};
// 根据告警等级获取告警
const getAlertLevel = () => {
    window.TiIns.Core.Alarm.getAlarmData({ level: '1' }).then((res: any) => {
        console.log('告警等级告警数据', res);
    });
};
// 根据孪生体code获取告警数据-归属孪生体code，多个请用,分隔
const getAlertCode = () => {
    window.TiIns.Core.Alarm.getAlarmData({ types: 'ZHAO_MING_DENG' }).then(
        (res: any) => {
            console.log('孪生体code告警数据', res);
        }
    );
};
// 用户信息相关
// 获取登录用户相关信息
const getUserConfig = () => {
    window.TiIns.Core.Auth.getUserInfo().then((res: any) => {
        console.log('登录用户信息', res);
    });
};
// 获取baseX授权信息
const getLicenceInfo = () => {
    window.TiIns.Core.Auth.getLicenseInfo().then((res: any) => {
        console.log('baseX授权信息', res);
    });
};
// 加载boundary
const loadBoundary = () => {
    const lineData = window.twinsManagerIns.getCurrentModelByCode([
        'CE_SHI_XIAN',
    ]);
    console.log('linedata', lineData);
    if (lineData.length > 0) {
        lineData.forEach((line: any) => {
            const points = JSON.parse(line.cb_data).vertices;
            // 转换圆角
            const trasData = window.TiIns.Utils.transformPoints({
                points,
                closed: true,
                radius: 5,
            });
            window.twinsManagerIns.createBoundary({
                uuid: line.uuid,
                name: '围栏',
                points: trasData,
                userData: line,
                height: 10,
                // color: '#FF00FF',
                emissive: '#FF0000',
                // opacity: 0.1,
                direction: 'y',
                scroll: true,
                speed: -1,
                image: '/test/testImg/boundary.png',
                customMarker: {
                    // el: createEle(),
                    url: testMarker,
                    // keepSize: false,
                    size: 5,
                    // localPosition: [0, 10, 0],
                    // pivot: [1, 1],
                    // alwaysOnTop: false
                },
                modelCb: (obj: any) => {
                    console.log('围栏创建', obj);
                },
                markerCb: (obj: any) => {
                    console.log('围栏marker创建', obj);
                    // 添加点击事件等
                },
            });
        });
    }
};
// 加载RouteLine
const loadRouteLine = () => {
    const lineData = window.twinsManagerIns.getCurrentModelByCode([
        'CE_SHI_MIAN',
    ]);
    if (lineData.length > 0) {
        lineData.forEach((line: any) => {
            const points = JSON.parse(line.cb_data).vertices;
            window.twinsManagerIns.createRouteLine({
                uuid: line.uuid,
                name: 'routeLine',
                points,
                userData: line,
                // color: '#FF00FF',
                // emissive: '#FF0000',
                // opacity: 0.1,
                scroll: true,
                image: '/test/testImg/routeLine.png',
                arrowCap: true,
                customMarker: {
                    // el: createEle(),
                    url: testMarker,
                    // keepSize: false,
                    size: 5,
                    // localPosition: [0, 10, 0],
                    // pivot: [1, 1],
                    // alwaysOnTop: false
                },
                modelCb: (obj: any) => {
                    console.log('routeLine创建', obj);
                },
                markerCb: (obj: any) => {
                    console.log('routeLine marker创建', obj);
                    // 添加点击事件等
                },
            });
        });
    }
};
// 获取效果包列表
const getPackages = () => {
    // 传参： 例如:?pageNo=2&pageSize=23 不传获取所有
    // 说明： kind: 1 表示地球效果包 2 表示园区效果包
    // 拼接获取效果包地址：`${core.httpOpt.previewModelUrl}effect/${data.code}/${data.version}`
    window.TiIns.Core.Api.getEffectPackages().then((res: any) => {
        console.log('效果包列表', res);
    });
};
// 获取效果包版本-传参：效果包的parentId属性 enable表示启用
const getPackageVersion = () => {
    const param = {
        parentId: '1628567543745163265',
    };
    window.TiIns.Core.Api.getPackageVersion(param).then((res: any) => {
        console.log('效果包版本', res);
    });
};
// 获取孪生对象对象数据
const getTwinsObjectData = () => {
    const codes = ['MAP_LEVEL', 'MAP_VECTOR_DATA'];
    window.TiIns.Core.Api.getTwinsObjectData(codes).then((res: any) => {
        console.log('孪生对象数据', res);
    });
};
// 获取地图层级对象数据
const getMapLevelData = () => {
    window.TiIns.Core.Api.getMapLevelData().then((res: any) => {
        console.log('默认对象地图层级数据', res);
    });
};
onMounted(() => {
    initScene();
});
</script>

<style lang="scss" scoped>
.scene {
    width: 100%;
    height: 100%;
    overflow: hidden;

    #div3d {
        position: absolute;
        top: 0;
        left: 0;
        width: 1920px;
        height: 1080px;
    }

    #div2d {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        overflow: auto;
        width: 1920px;
        height: 1080px;
        margin: 0;
        pointer-events: none;
    }

    div {
        color: #ffffff;
    }

    button {
        margin-right: 5px;
    }

    .btn-wrap {
        position: absolute;
        top: 30px;
        left: 50%;
        z-index: 999;
        transform: translateX(-50%);
    }
}
</style>
